<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>打印设置</span>
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="商家联" name="1"></el-tab-pane>
                <el-tab-pane label="顾客联" name="2"></el-tab-pane>
                <el-tab-pane label="一菜一单" name="3"></el-tab-pane>
            </el-tabs>
            <div class="ticketWrapper flext pad_20" v-show="activeName!='3'">
                <div class="demo pad_20">
                    <div class="fon_24 t_c pad_b_5">取单号：#1</div>
                    <div class="font_w400 t_c mar_b10">* 店铺名称(北京大学店) *</div>
                    <div class="demoTitle font_w400 fon_16 t_c pad1" v-show="orderType=='1' || orderType=='3'">
                        <div class="font_w400 fon_24">-- 余额支付 --</div>
                        <div class="font_w400 fon_24 mar_t10">【立即送达】</div>
                    </div>
                    <div class="demoTitle font_w400 fon_16 t_c pad1" v-show="orderType=='2' || orderType=='4'">
                        <div class="font_w400 fon_24">-- 余额支付 --</div>
                        <div class="font_w400 fon_24 mar_t10">【预订单】</div>
                    </div>
                    <div class="demoTitle font_w400 fon_16 t_c pad1" v-show="orderType=='5'">
                        <div class="font_w400 fon_24">-- 售后订单 --</div>
                        <div class="font_w400 fon_24 mar_t10">订单申请售后,请尽快处理</div>
                    </div>
                    <div class="pad_b_5 bor_b_r102 mar_t20" v-show="orderType=='1' || orderType=='5'">
                        <p>期望送达时间：立即送出14:27</p>
                    </div>
                    <div class="pad_b_5 bor_b_r102 mar_t20" v-show="orderType=='2'">
                        <p>期望送达时间：2020-08-08 08:00</p>
                    </div>
                    <div class="pad_b_5 bor_b_r102 mar_t20" v-show="orderType=='3' || orderType=='4'">
<!--                        <p class="wei fon_16">取货码：121807</p>-->
                        <p>取单方式：到店就餐</p>
                        <p>预计到店时间：立即自取</p>
                    </div>
                    <div class="subtotal bor_b_r102 pad_tb_15">
                        <!--                        <div class="dif pad1" v-show="activeName=='2'">餐桌信息：大厅 两人桌(1-2人)</div>-->
                        <div class="dif pad1">订单编号：524251426352336664541</div>
                        <div class="dif pad1">下单时间：2017-11-16 12:36:36</div>
                        <!--                        <div class="dif wordall fon_14 font_w600 pad1">期望时间： <span class="fon_16 wordall">12：00</span>-->
                        <!--                        </div>-->
                        <div class="dif wordall fon_14 font_w600 pad1">备注：千万别放蒜 不能放辣 姜也不能放
                            <!-- <input v-model="note" class="bornone" placeholder="千万别放蒜 不能放辣  姜也不能放"/> -->
                        </div>
                    </div>
                    <div class="product pad_tb_15 bor_b_r102">
                        <div class="productItem flext pad1">
                            <div class="productItemTitle">名称</div>
                            <div class="productItemNum t_c">数量</div>
                            <div class="productItemMoney t_r">价格</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">鲜汁肉包</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">5.20</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">老坛酸菜馅饼</div>
                            <div class="productItemNum t_c">X2</div>
                            <div class="productItemMoney t_r">12.20</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">韭菜猪肉馅饼</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">6.00</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">养生馒头</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">3.00</div>
                        </div>
                    </div>
                    <div class="subtotal mar_t15">
                        <div class="other mar_b10 pad_b_10 rel bor_b_r102">
                            <p class="otherline ab t_c ba_f">其他费用</p>
                            <div class="otherDetail flext pad1">
                                <div class="otherTitle">[配送费: +5.00]</div>
                            </div>
                            <div class="otherDetail flext pad1">
                                <div class="otherTitle">[餐盒费: +2.00]</div>
                            </div>
                            <div class="otherDetail flext pad1">
                                <div class="otherTitle">[优惠券优惠: -5.00]</div>
                            </div>
                            <div class="otherDetail flext pad1">
                                <div class="otherTitle">[满减优惠: -2.00]</div>
                            </div>
                            <div class="subTotalItem flex-b fon_16 font_w600 lh30 pad1">
                                <div class="mar_t10 fon_24 fnormal">实付：¥196.0</div>
                            </div>
                        </div>
                    </div>
                    <div class="addrass fon_18 font_w600 pad_tb_10 bor_b_r102">
                        <div>北京市朝阳区望江西路xxx号xxx大厦xxx号楼xxx层xxx</div>
                        <div>赵先生 135xxxx9685</div>
                    </div>
                    <div class="diff codeWrapper t_c pad1">
                        <img src="../../assets/img/setting/code.png" class="codeimg">
                        <div class="bottom-tip mar_t10 wordall" v-show="activeName=='1'">{{note}}</div>
                        <div class="bottom-tip mar_t10 wordall" v-show="activeName=='2'">{{note2}}</div>
                        <div>门店电话：xxxxxxxxxxx</div>
                    </div>
                    <div class="font_w400 fon_24 t_c">---- #1完 ----</div>
                </div>
                <div class="ticketSet rel mar_l50 pad_20 ba_f5">
                    <div class="ticketSetTitle fon_14 font_w700 pad_b_15 bor_b_el">
                        <span v-show="activeName=='1'">外卖小票</span>
                        <span v-show="activeName=='2'">堂食小票</span>
                        <span v-show="activeName=='3'">一菜一单小票</span>
                    </div>
                    <div>
                        <div class="editWrapperTitle color_6 pad_tb_5">订单类型</div>
                        <div class="mar_t10" v-show="activeName=='1'">
                            <el-radio-group v-model="orderType">
                                <el-radio :label="'1'">外卖订单</el-radio>
                                <el-radio :label="'2'">外卖预约订单</el-radio>
                                <el-radio :label="'3'">外卖自提订单</el-radio>
                                <el-radio :label="'4'" class="mar_t20">自提预约订单</el-radio>
                                <el-radio :label="'5'">退款订单</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="mar_t10" v-show="activeName=='2'">
                            <el-radio-group v-model="orderType2">
                                <el-radio :label="'1'">外卖订单</el-radio>
                                <el-radio :label="'2'">外卖预约订单</el-radio>
                                <el-radio :label="'3'">外卖自提订单</el-radio>
                                <el-radio :label="'4'" class="mar_t20">自提预约订单</el-radio>
                                <el-radio :label="'5'">退款订单</el-radio>
                            </el-radio-group>
                        </div>

                    </div>
                    <div class="editWrapper pad_tb_15">
                        <div class="editWrapperTitle color_6 pad_tb_5">编辑底部备注</div>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="note" ref="note"
                                  v-show="activeName=='1'"></el-input>
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="note2" ref="note2"
                                  v-show="activeName=='2'"></el-input>
                    </div>
                    <div class="editWrapper pad_tb_15">
                        <div class="editWrapperTitle color_6 pad_tb_5">打印二维码</div>
                        <el-switch v-model="display" active-value="1" inactive-value="2"
                                    v-show="activeName=='1'"></el-switch>
                        <el-switch v-model="display2" active-value="1" inactive-value="2"
                                   v-show="activeName=='2'"></el-switch>
                    </div>
                    <div class="editWrapper pad_tb_15">
                        <div class="editWrapperTitle color_6 pad_tb_5">二维码链接</div>
                        <el-input placeholder="请输入二维码链接" v-model="codeUrl" v-show="activeName=='1'"></el-input>
                        <el-input placeholder="请输入二维码链接" v-model="codeUrl2" v-show="activeName=='2'"></el-input>
                    </div>
                    <div class="btnWrapper pad_t_10 flext">
                        <!-- <el-button plain>打印测试</el-button> -->
                        <el-button type="primary" @click="submitForm">应用</el-button>
                    </div>
                </div>
            </div>
            <div v-show="activeName=='3'">
                <div class="demo pad_20 mar_t20 mar_l20">
                    <div class="fon_24 t_c pad_b_5">取单号：#1</div>
                    <div class="subtotal bor_b_r102 pad_tb_15">
                        <div class="dif pad1">订单编号：524251426352336664541</div>
                        <div class="dif pad1">下单时间：2017-11-16 12:36:36</div>
                    </div>
                    <div class="product pad_tb_15 bor_b_r102">
                        <div class="productItem flext pad1">
                            <div class="productItemTitle">名称</div>
                            <div class="productItemNum t_c">数量</div>
                            <div class="productItemMoney t_r">价格</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">鲜汁肉包</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">5.20</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">老坛酸菜馅饼</div>
                            <div class="productItemNum t_c">X2</div>
                            <div class="productItemMoney t_r">12.20</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">韭菜猪肉馅饼</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">6.00</div>
                        </div>
                        <div class="productItem flext pad1 fon_16">
                            <div class="productItemTitle">养生馒头</div>
                            <div class="productItemNum t_c">X1</div>
                            <div class="productItemMoney t_r">3.00</div>
                        </div>
                    </div>
                    <div class="font_w400 fon_24 t_c mar_t40">---- #1完 ----</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {getConfig, postConfig} from "@/api/setup";

    export default {
        mounted() {
            this.bus.$emit('loading', true);
            this.init();
            this.note = this.$refs.note.value.replace("↵", "\n")
            this.note2 = this.$refs.note2.value.replace("↵", "\n")
        },
        data() {
            return {
                activeName: '1',
                note: "",
                note2: "",
                codeUrl: "",
                codeUrl2: "",
                id: "",
                inId: "",
                orderType: "1",
                orderType2: "1",
                display: "1",
                display2: "1",
            }
        },
        methods: {
            handleClick() {

            },
            async init() {
                const {data} = await getConfig({ident: 'print'});
                if (data.sjlNote) {
                    this.note = data.sjlNote;
                }
                if (data.gklNote) {
                    this.note2 = data.gklNote;
                }
                this.codeUrl = data.codeUrl;
                this.codeUrl2 = data.codeUrl2;
                this.display = data.display;
                this.display2 = data.display2;
                this.orderType = data.orderType?data.orderType:'1';
                this.orderType2 = data.orderType2?data.orderType2:'1';
                this.bus.$emit('loading', false)
            },
            async submitForm() {
                const {msg} = await postConfig({
                    ident: 'print',
                    identName: '打印设置',
                    sjlNote: this.note,
                    gklNote: this.note2,
                    codeUrl: this.codeUrl,
                    codeUrl2: this.codeUrl2,
                    display: this.display,
                    display2: this.display2,
                    orderType: this.orderType,
                    orderType2: this.orderType2,
                });
                this.$baseMessage(msg, "success");
                this.init();
            },
        }
    }
</script>
<style>
    .ticketWrapper {
        width: 900px;
    }

    .pad1 {
        padding: 1px 0
    }

    .demo {
        width: 320px;
        box-shadow: rgb(225, 225, 225) 1px 1px 5px 2px;
    }

    .ticketSet {
        -webkit-box-flex: 1;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(225, 225, 225);
        border-image: initial;
        flex: 1 1 0%;
    }

    /*.order-source {*/
    /*    margin-top: -15px;*/
    /*}*/

    .demoTitle {
        margin-bottom: -10px;
    }

    .dif {
        text-indent: -6px;
    }

    .productItemTitle, .otherTitle {
        -webkit-box-flex: 0;
        flex: 0 0 50%;
    }

    .productItemNum, .productItemMoney, .otherNum, .otherMoney {
        -webkit-box-flex: 0;
        flex: 0 0 25%;
    }

    .otherline {
        width: 60px;
        top: -26px;
        left: 50%;
        margin-left: -30px;
    }

    .subTotalItemTitle {
        -webkit-box-flex: 0;
        flex: 0 0 65%;
    }

    .subTotalItemMoney {
        -webkit-box-flex: 0;
        flex: 0 0 35%;
    }

    .codeWrapper {
        padding: 10px 0px 35px;
    }

    .codeimg {
        width: 150px;
        height: 150px;
    }

    .ticketSet:before {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        left: -40px;
        top: 30px;
        border-width: 20px;
        border-style: solid;
        border-color: transparent rgb(245, 245, 245) transparent transparent;
        border-image: initial;
        border-right: 20px solid rgb(225, 225, 225);
    }
</style>
